<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结算</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
    <style>
        .checkout-container {
            max-width: 960px;
            margin: 30px auto;
        }
        .address-card {
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            position: relative;
            transition: all 0.3s;
        }
        .address-card.selected {
            border-color: #28a745;
            background-color: rgba(40, 167, 69, 0.05);
            box-shadow: 0 0 10px rgba(40, 167, 69, 0.2);
        }
        .address-card .badge {
            position: absolute;
            right: 15px;
            top: 15px;
        }
        .order-summary {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
        }
        .order-item {
            display: flex;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .order-item:last-child {
            border-bottom: none;
        }
        .order-item img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            margin-right: 15px;
            border-radius: 5px;
        }
        .btn-submit {
            margin-top: 30px;
        }
        .address-check {
            position: absolute;
            right: 15px;
            top: 15px;
            display: none;
        }
        .address-card.selected .address-check {
            display: block;
            color: #28a745;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <jsp:include page="header.jsp" />

    <div class="container checkout-container">
        <div class="row">
            <div class="col-md-8">
                <h3 class="mb-4">购物车结算</h3>
                
                <!-- 收货地址选择 -->
                <div class="address-selection">
                    <h5 class="mb-3">选择收货地址</h5>
                    
                    <c:if test="${empty shippingAddresses}">
                        <div class="alert alert-warning">
                            您还没有添加收货地址，请先 <a href="${pageContext.request.contextPath}/shipping/add" class="alert-link">添加收货地址</a>
                        </div>
                    </c:if>
                    
                    <c:forEach var="address" items="${shippingAddresses}" varStatus="status">
                        <div class="address-card ${status.index == 0 ? 'selected' : ''}" data-address-id="${address.id}">
                            <div class="address-check"><i class="fa fa-check-circle"></i></div>
                            <c:if test="${address.defaultStatus == 1}">
                                <span class="badge badge-success">默认</span>
                            </c:if>
                            <h6>${address.receiverName} ${address.receiverPhone}</h6>
                            <p class="mb-0 text-muted">
                                ${address.receiverProvince} ${address.receiverCity} ${address.receiverDistrict} ${address.receiverAddress}
                            </p>
                        </div>
                    </c:forEach>
                    
                    <div class="text-center mt-4">
                        <a href="${pageContext.request.contextPath}/shipping/add" class="btn btn-outline-primary">
                            <i class="fa fa-plus"></i> 添加新地址
                        </a>
                    </div>
                </div>

                <!-- 订单商品信息 -->
                <div class="mt-5">
                    <h5 class="mb-3">订单商品（${cartItems.size()}）</h5>
                    
                    <c:forEach var="item" items="${cartItems}">
                        <div class="order-item">
                            <img src="${pageContext.request.contextPath}/static/upload/${item.productImage}" alt="${item.productName}">
                            <div>
                                <h6 class="mb-1">${item.productName}</h6>
                                <div class="text-muted small">数量: ${item.quantity}</div>
                                <div class="text-primary">￥${item.productPrice} × ${item.quantity}</div>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>
            
            <div class="col-md-4">
                <!-- 订单汇总 -->
                <div class="order-summary">
                    <h5 class="mb-4">订单汇总</h5>
                    <div class="d-flex justify-content-between mb-2">
                        <span>商品金额:</span>
                        <span>¥${totalPrice}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>运费:</span>
                        <span>¥0.00</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="font-weight-bold">实付金额:</span>
                        <span class="text-danger font-weight-bold">¥${totalPrice}</span>
                    </div>
                    
                    <!-- 提交订单按钮 -->
                    <div class="text-center btn-submit">
                        <form id="order-form" method="post" action="${pageContext.request.contextPath}/order/direct-submit">
                            <input type="hidden" id="shippingIdInput" name="shippingId" value="${shippingAddresses[0].id}">
                            <button type="submit" class="btn btn-primary btn-lg btn-block" id="submitOrderBtn">提交订单</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <jsp:include page="footer.jsp" />

    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 地址选择
            $('.address-card').click(function() {
                $('.address-card').removeClass('selected');
                $(this).addClass('selected');
                
                // 更新选中的地址ID
                var addressId = $(this).data('address-id');
                $('#shippingIdInput').val(addressId);
            });
        });
    </script>
</body>
</html> 